<template>
  <!-- 电台个性推荐 -->
  <div>
    <ul>
      <li v-for="item in datalist.slice(0,5)" :key="item.index">
        <img :src="item.picUrl" alt="">
        <p class="s10 fff">{{item.name | ellipsis }}</p>
        <a href="#" class="s10 black">{{item.rcmdText}}</a>
      </li>
    </ul>
  </div>
</template>
<style scoped>
ul {
  width: 970px;
  display: flex;
  flex-wrap: wrap;
}
ul > li {
  margin: 10px;
  list-style: none;
  width: 170px;
}
ul li img {
  width: 100%;
  border-radius: 10px;
}
.s10 {
  font-size: 10px;
}
.fff {
  position: relative;
  top: -23px;
  text-decoration: none;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
}
.black {
  color: gray;
}
a {
  position: relative;
  top: -20px;
  text-decoration: none;
}
a:hover {
  color: #000;
}
</style>
<script>
import axios from "axios";
export default {
  data() {
    return {
      datalist: [],
    };
  },
  mounted() {
    axios.get("/api/djradio/personalize/rcmd").then((res) => {
      // console.log(res.data.data)
      this.datalist = this.datalist.concat(res.data.data);
    });
  },
  // 过渡器
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
  },
};
</script>
